﻿import 'element-ui/lib/theme-chalk/index.css'
import ProgressDialog from '../components/ProgressDialog/index.vue'
import Button from './Button.vue'
import { CompleteCallBack, TaskItem } from '../components/ProgressDialog/task'
import { showTask } from '../components/ProgressDialog/showProgress'

const data = [
  { name: '1' },
  { name: '2' },
  { name: '3' },
  { name: '4' }
]
const func: CompleteCallBack = ({ item, message }) => {
  message.success(`${item.name} 调用成功！！！`)
}
const columns = [
  { label: '客户', key: 'name', popover: true }
]
const items: TaskItem[] = [
  { name: '客户', num: data.length, action: func, data: data }
]

export default {
  title: 'Example/批量操作弹窗',
  component: ProgressDialog,
  argTypes: {
    title: { table: { category: 'Text' } },
    completedMessage: { table: { category: 'Text' } },
    initSubmitText: { table: { category: 'Text' } },
    initCancelText: { table: { category: 'Text' } },
    completedSubmitText: { table: { category: 'Text' } },
    completedCancelText: { table: { category: 'Text' } }
  },
  args: {
    show: false,
    title: '自定义标题',
    items,
    columns
  }
}

const Template: any = (args: any, { argTypes }: any) => ({
  props: Object.keys(argTypes),
  components: { ProgressDialog, Button },
  template: '<div><button @click="startProgress">点击开始任务</button><progress-dialog v-if="show" :show.sync="show" v-bind="$props" /></div>',
  methods: {
    startProgress: function() {
      (this as any).show = true
    }
  }
})

export const Primary = Template.bind({ })
Primary.storyName = 'default'
Primary.args = {
  initSubmitText: '自定义初始确认',
  initCancelText: '自定义初始取消',
  completedSubmitText: '自定义完成确认',
  completedCancelText: '自定义完成取消'
}

export const AutoStart = Template.bind({})
AutoStart.storyName = '自动开始'
AutoStart.args = {
  autoStart: true
}

export const FunctionalInvoke = (args: any, { argTypes }: any) => ({
  storyName: '函数式调用',
  props: Object.keys(argTypes),
  template: '<button @click="handleClick">点击开始</button>',
  methods: {
    handleClick() {
      showTask({ items, columns })
    }
  }
})
FunctionalInvoke.storyName = '函数式调用'
